@function ws($px) { 
	$rem: 37.5;
	@return ($px / $rem)+rem;
}

$lanColor: #4FA7E6;
$main-color: #4FA7E6; 
$shaow-bottom: 0 ws(2) ws(5) 0 rgba(7, 17, 27, 0.11);
$shaow-main: 0 0 ws(15) 0 rgba($main-color, 0.2);



@mixin line {
	position: absolute;
	right: 0;
	left: 0;
	height: 1px;
	content: '';
	transition: .35s all;
	transform: scaleY(.5);
}

@mixin one-line {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap; 
}

@mixin border-line($color, $direction) {
	position: relative;
	transform-style: preserve-3d;
	&::after {
		@include line;
		background-color: $color;
		@if $direction==top {
			top: -1px;
		}
		@else {
			bottom: 0;
		}
	}
}

$length: 10 15 20 25 30;

@each $item in $length {
	.m-#{$item} {
		margin: ws($item);
	}
	.m-t-#{$item} {
		margin-top: ws($item);
	}
	.m-b-#{$item} {
		margin-bottom: ws($item);
	}
	.p-#{$item} {
		padding: ws($item);
	}
	.p-t-#{$item} {
		padding-top: ws($item);
	}
	.p-b-#{$item} {
		padding-bottom: ws($item);
	}
}

$fontList: 12 14 16 24;
@each $item in $fontList {
	.font-#{$item} {
		font-size: ws($item);
	}
}

$colorList: #414141 #7f7f7f #adadad;
.font-c-41 {
	color: #414141;
}

.font-c-7f {
	color: #7f7f7f;
}

.font-c-ad {
	color: #adadad;
}

.font-c-min{
	color: $main-color;
}

body {
	font-family: 'Helvetica Neue', Helvetica, sans-serif;
	font-size: ws(16);
	line-height: unset;
}

.bottom-bow {
	position: fixed;
	width: 100%;
	bottom: -1px;
	height: 1px;
	box-shadow: 0px -1px 3px rgba(0, 0, 0, 0.2);
	z-index: 1000;
}

.fiexd-header {
	position: fixed;
	top: 0;
	width: 100%;
	display: flex;
	flex-direction: column;
	background-color: #fff;
	z-index: 1000;
	.header {
		display: flex;
		align-items: center;
		justify-content: center;
		height: ws(44);
		line-height: ws(44);
		font-size: ws(18);
		position: relative;
		.header-back {
			position: absolute;
			padding-left: ws(5);
			left: 0;
			font-size: ws(14);
			display: flex;
			align-items: center;
			height: ws(44);
			.mui-icon {
				font-size: ws(24);
				line-height: unset;
				margin-right: ws(-4);
			}
		}
	}
}

.main-body {
	margin-top: ws(44);
}

.loading-warpper {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	background-color: #fff;
	z-index: 9;
	display: flex;
	align-items: center;
	justify-content: center;
	.loading {
		min-width: ws(60);
		min-height: ws(60);
		position: relative;
		.item1,
		.item2 {
			width: 100%;
			height: 100%;
			border-radius: 50%;
			background-color: $main-color;
			opacity: .6;
			position: absolute;
			top: 0;
			left: 0;
			animation: bounce 2s infinite ease-in-out;
		}
		.item2 {
			animation-delay: -1s;
		}
	}
}

@keyframes bounce {
	0%,
	100% {
		transform: scale(0);
	}
	50% {
		transform: scale(1);
	}
}
